<template>
    <div class="mine">
        <div class="info-box">
            <div class="info-header">
                <div style="position: relative;">
                    <upload-img v-model="userData.photo" class="photo"></upload-img>
                </div>
                <label>信誉度({{creditTag}})</label>
                <el-rate
                        v-model="userData.credit"
                        :max="10"
                        show-score
                        disabled
                        allow-half
                        score-template="{value}"
                        show-text
                        :colors="['#99A9BF', '#F7BA2A', '#FF9900']"
                >
                </el-rate>
            </div>
            <div class="info-body" style="width: 60%;height: 500px;border-bottom: 6px solid #75afbd">

                <el-form :model="userData" ref="userData" style="margin-top: 20px;padding: 0 30px;border-right: 5px solid white;border-left: 5px solid white" >
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item>
                                <div class="input-icon">
                                    <img src="../../assets/user/user.png" class="icon-style"/>
                                    <div class="icon-text">账户</div>
                                </div>
                                <el-input class="input-text" v-model="userData.userName"></el-input>
                            </el-form-item>
                            <el-form-item >
                                <div class="input-icon">
                                    <img src="../../assets/user/intersex.png" class="icon-style"/>
                                    <div class="icon-text">性别</div>
                                </div>
                                <el-select class="input-text" v-model="userData.sex" value="userData.sex">
                                    <el-option value="男"></el-option>
                                    <el-option value="女"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item>
                                <div class="input-icon">
                                    <img src="../../assets/user/email.png" class="icon-style"/>
                                    <div class="icon-text">邮箱</div>
                                </div>
                                <el-input class="input-text" placeholder="请输入邮箱" v-model="userData.email"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item prop="phone">
                                <div class="input-icon">
                                    <img src="../../assets/user/call.png" class="icon-style"/>
                                    <div class="icon-text">电话</div>
                                </div>
                                <el-input class="input-text" autocomplete="off" v-model.number="userData.phone"></el-input>
                            </el-form-item>
                            <el-form-item >
                                <div class="input-icon">
                                    <img src="../../assets/user/icon-location.png" class="icon-style"/>
                                    <div class="icon-text">地址</div>
                                </div>
                                <el-input class="input-text" placeholder="请输入居住地" v-model="userData.location"></el-input>
                            </el-form-item>
                            <el-form-item >
                                <div class="input-icon">
                                    <img src="../../assets/user/money.png" class="icon-style"/>
                                    <div class="icon-text">余额</div>
                                </div>
                                <el-input class="input-text" disabled v-model="userData.balance">
                                    <template slot="append">元</template>
                                </el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <div style="width: 100%;height: 320px;display: flex;align-items: center;justify-content: center;">
                    <el-button type="info" style="width: 200px" @click="updateUser">确认</el-button>
                </div>
            </div>

        </div>
    </div>
</template>

<script>
    import UploadImg from '../../components/upload/UploadImg'
    import Config from  '../../config'
    export default {
        name: "Mine",
        data() {
            return {
                userData:{
                    id:"",
                    userName:"",
                    account:"",
                    phone:"",
                    password:"",
                    credit:0,
                    balance:"",
                    email:"",
                    photo:""
                },
                roleList:[],
                domain: Config.domain,
                creditText:['信誉极差','信誉很差','信誉较差','信誉一般','信誉良好','信誉较好','人品爆棚'],
                creditTag:""
            }
        },
        components:{ UploadImg },
        methods:{
            getUserData(){
                this.userData = JSON.parse(localStorage.getItem("user"));
                let userId = this.userData.id;
                this.$http.get("/user/get/"+userId).then(res=>{
                    if (res.status===200){
                        this.userData = res.data;
                        localStorage.setItem("user",JSON.stringify(this.userData))
                    }
                })

            },
            getRoleList(){
                this.$http.get("/role/all").then(res=>{
                    if (res.status===200){
                        this.roleList = res.data;
                        console.log(this.roleList)
                    }
                })
            },
            updateUser(){
                console.log(this.userData);
                let data = this.userData;
                this.$http.post("/user/update",data).then(res=>{
                    if (res.status===200){
                        this.getUserData();
                        this.$message.success("更新成功")
                    }else {
                        this.$message.error("更新失败")
                    }
                })
            }

        },
        mounted(){
            this.getUserData();
        },
        watch:{
           'userData.credit':function (val) {
               if (val===0){
                   this.creditTag = this.creditText[0];
               } else if (val>0 && val <=2){
                   this.creditTag = this.creditText[1];
               } else if (val>2 && val <=4){
                   this.creditTag = this.creditText[2];
               } else if (val>4 && val <=5){
                   this.creditTag = this.creditText[3];
               } else if (val >5 && val <=7){
                   this.creditTag = this.creditText[4];
               } else if (val>7 && val <=9){
                   this.creditTag = this.creditText[5];
               } else {
                   this.creditTag = this.creditText[6];
               }
           }
       },
        created(){
            let socket = this.$store.state.socket;
            this.$ws.sendObject(socket,this.userData)
        }
    }
</script>

<style scoped lang="less">
    .mine{
        width: 100%;
        height: calc(~'100vh - 88px');
        .info-box{
            width: 100%;
            display: flex;
            margin-top: 20px;
            align-items: center;
            flex-direction: column;
            height: 100%;
            .info-header{
                border: 1px solid #75afbd;
                border-bottom: none;
                width: 60%;
                height: 250px;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                background: url("../../assets/11.jpg") no-repeat;
                background-size: cover;
                border-radius: 15px 15px 0 0;
            }
            .photo{
                width: 200px;
                height: 200px;
                border-radius: 50%;
            }
            .info-body{
                border: 1px solid #75afbd;
                border-top: none;
                .input-icon{
                    display: inline-block;
                    width: 50px;
                    height: 70px;
                    position:relative;
                    .icon-style{
                        width: 50px;
                        height: 50px;
                    }
                    .icon-text{
                        position:absolute;
                        bottom: -10px;
                        left: 8px;
                        font-size: 18px
                    }
                }
                .input-text{
                    width: 80%;
                    margin-left: 15px
                }
            }
        }


    }
</style>